<template>
  <div>
    <label for="">品类检索:</label>
    <el-cascader
      style="width: 580px; margin-left: 10px"
      size="small"
      v-model.trim="searchValue"
      ref="searchCascader"
      :options="materialList"
      @change="searchChange"
      :props="{ checkStrictly: true, value: 'id', label: 'materialName', children: 'son' }"
      filterable
    ></el-cascader>
    <div class="dialog_box">
      <div class="left">
        <p
          v-for="(item, index) in materialList"
          :key="index"
          :class="firstIndex == index ? 'on' : ''"
          @click="firstClick(index)"
        >
          {{ item.materialName }}
        </p>
      </div>
      <div class="center">
        <p
          v-for="(item, index) in materialSecondList"
          :key="index"
          :class="secondIndex == index ? 'on' : ''"
          @click="secondClick(index)"
        >
          {{ item.materialName }}
        </p>
      </div>
      <div class="right">
        <p v-for="(item, index) in materialThirdList" :key="index">
          {{ item.materialName }}
          <el-checkbox v-model.trim="item.isHave" @change="thirdChange($event, index)"></el-checkbox>
        </p>
      </div>
    </div>
    <div class="result_box">
      <div v-for="(item, index) in materialShowList" :key="index">
        {{ item.materialName }}
        <i @click="removeMaterial(index)" class="iconfont icon-guanbi"></i>
      </div>
    </div>
    <div class="footer">
      <button class="no_btn" @click="closeBtn">取消</button>
      <button class="ok_btn" @click="okBtn">确定</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchValue: '',
      materialSecondList: [],
      materialThirdList: [],
      materialShowList: [],
      materialShowListCopy: [],
      firstIndex: 0,
      secondIndex: 0,
      materialList: []
    }
  },
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  methods: {
    //搜索事件
    searchChange(e) {
      console.log(e)
      for (let i = 0; i < this.materialList.length; i++) {
        if (this.materialList[i].id == e[0]) {
          this.firstClick(i)
          let secondList = this.materialList[i].son
          if (e.length >= 2) {
            for (let j = 0; j < secondList.length; j++) {
              if (secondList[j].id == e[1]) {
                this.secondClick(j)
                if (e.length == 3) {
                  let thirdList = secondList[j].son
                  for (let k = 0; k < thirdList.length; k++) {
                    console.log(thirdList[k])
                    if (thirdList[k].id == e[2] && !thirdList[k].isHave) {
                      this.$set(thirdList[k], 'isHave', true)
                      this.materialShowList.push(thirdList[k])
                    }
                  }
                }
              }
            }
          }
        }
      }
      this.$nextTick(() => {
        this.$refs.searchCascader.$refs.panel.clearCheckedNodes()
        this.$refs.searchCascader.$refs.panel.activePath = []
        this.$refs.searchCascader.dropDownVisible = false
      })
    },
    //选择物资类别按钮
    selectMaterial() {
      this.$https({
        method: 'post',
        url: '/material/listAllMaterial',
        data: {}
      })
        .then(res => {
          if (res.code === 0) {
            // this.materialList = this.common.getTree(
            //   res.data,
            //   0,
            //   "fatherId",
            //   "id",
            //   "materialName",
            //   {
            //     isHave: false,
            //   }
            // );
            this.materialList = res.data
            this.firstClick(0)
            this.materialVisible = true
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    //物资一级点击事件
    firstClick(index) {
      this.firstIndex = index
      this.secondIndex = 0
      if (this.materialList[index].son.length) {
        this.materialSecondList = this.materialList[index].son
        this.secondClick(0)
      } else {
        this.materialSecondList = []
        this.materialThirdList = []
      }
    },
    //物资二级点击事件
    secondClick(index) {
      this.secondIndex = index
      this.materialThirdList = this.materialSecondList[index].son
      for (let i = 0; i < this.materialShowListCopy.length; i++) {
        for (let j = 0; j < this.materialThirdList.length; j++) {
          if (this.materialShowListCopy[i].id == this.materialThirdList[j].id) {
            this.materialThirdList[j].isHave = true
          }
        }
      }
    },
    //物资三级点击事件
    thirdChange(e, index) {
      if (e) {
        this.materialShowList.push(this.materialThirdList[index])
      } else {
        for (let i = 0; i < this.materialShowList.length; i++) {
          if (this.materialShowList[i].id == this.materialThirdList[index].id) {
            this.materialShowList.splice(i, 1)
          }
        }
      }
    },
    //删除已选择物资
    removeMaterial(index) {
      const reduce = (arr, id) => {
        arr.forEach(element => {
          if (element.son === null) {
            if (element.id == id) {
              this.$set(element, 'isHave', false)
              this.materialShowList.splice(index, 1)
              this.materialShowListCopy = this.materialShowList
            }
          } else {
            reduce(element.son, id)
          }
        })
      }
      let id = this.materialShowList[index].id
      for (let i = 0; i < this.materialList.length; i++) {
        reduce(this.materialList[i].son, id)
      }
    },
    //物资确认按钮
    okBtn() {
      this.materialShowListCopy = JSON.parse(JSON.stringify(this.materialShowList))
      this.$emit('close', this.materialShowListCopy)
    },
    //取消按钮
    closeBtn() {
      this.$emit('close', [])
    }
  },
  mounted() {
    if (this.list.length > 0) {
      this.materialShowListCopy = JSON.parse(
        JSON.stringify(this.list)
          .replace(/materialId/g, 'id')
          .replace(/typeTwoId/g, 'fatherId')
      )
      this.materialShowList = JSON.parse(
        JSON.stringify(this.list)
          .replace(/materialId/g, 'id')
          .replace(/typeTwoId/g, 'fatherId')
      )
    } else {
      this.materialShowListCopy = this.list
      this.materialShowList = this.list
    }
    this.selectMaterial()
  }
}
</script>

<style scoped lang="less">
.dialog_box {
  width: 100%;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  .on {
    background-color: #fee3dd;
  }
  .left {
    width: 350px;
    height: 490px;
    overflow-y: auto;
    border: 1px solid #d6d6d6;
    p {
      padding: 10px 20px;
      box-sizing: border-box;
      font-size: 14px;
      cursor: pointer;
    }
  }
  .center {
    width: 350px;
    height: 490px;
    overflow-y: auto;
    margin: 0 20px;
    border: 1px solid #d6d6d6;
    p {
      padding: 10px 20px;
      box-sizing: border-box;
      font-size: 14px;
      cursor: pointer;
      .el-checkbox {
        float: right;
      }
    }
  }
  .right {
    width: 400px;
    height: 490px;
    overflow-y: auto;
    box-sizing: border-box;
    border: 1px solid #d6d6d6;
    p {
      padding: 10px 20px;
      box-sizing: border-box;
      font-size: 14px;
      cursor: pointer;
      .el-checkbox {
        float: right;
      }
    }
  }
}
.result_box {
  width: 100%;
  border: 1px solid #d6d6d6;
  min-height: 150px;
  margin-top: 20px;
  div {
    display: inline-block;
    padding: 5px 10px;
    font-size: 14px;
    box-sizing: border-box;
    border: 1px solid #d6d6d6;
    border-radius: 5px;
    margin: 10px 10px;
    .iconfont {
      font-size: 12px;
      cursor: pointer;
    }
    .iconfont:hover {
      color: #fa7355;
    }
  }
}
.footer {
  width: 100%;
  margin-top: 20px;
  text-align: center;
  .no_btn {
    width: 130px;
    height: 32px;
    border: 1px solid #fa7355;
    color: #fa7355;
    background-color: #fff;
    border-radius: 5px;
    cursor: pointer;
  }
  .no_btn:hover {
    background-color: #fa7355;
    color: #fff;
  }
  .ok_btn {
    width: 130px;
    height: 32px;
    background-color: #fa7355;
    border-radius: 5px;
    margin-left: 20px;
    color: #fff;
    cursor: pointer;
  }
  .ok_btn:hover {
    background-color: rgba(250, 115, 85, 0.85);
  }
}
</style>
